<template>
  <div class="container-comment">
      <el-card >
          <div slot="header">
              <my-bread>评论管理</my-bread>
          </div>
          <!-- 表格 -->
          <el-table :data="comments">
              <el-table-column label="文章标题" prop="title"></el-table-column>
              <el-table-column label="总评论数" prop="total_comment_count"></el-table-column>
              <el-table-column label="粉丝评论数" prop="fans_comment_count"></el-table-column>
              <el-table-column label="状态">
                  <!-- 作用域插槽 -->
                  <template slot-scope="scope">
                      {{scope.row.comment_status?'已打开':'已关闭'}}
                  </template>
              </el-table-column>
              <el-table-column label="操作" >
                  <template slot-scope="scope">
                      <el-button @click="toggleStatus(scope.row)" v-if="scope.row.comment_status" type="danger">关闭评论</el-button>
                      <el-button  @click="toggleStatus(scope.row)" v-else type="success">打开评论</el-button>   
                  </template>
              </el-table-column>

          </el-table>

          <!-- 分页 -->
          <el-pagination
            style="margin-top:20px"
            background
            layout="prev, pager, next, sizes"
            :total="total"
            :page-size="reqParams.per_page"
            :page-sizes = "[10,20,30,40,50]"
            :current-page="reqParams.page"
            @current-change="changePage"
            @size-change="changeSize" >            
          </el-pagination>
      </el-card>
  </div>
</template>

<script>
export default {
    name:'page-comment',
    data(){
        return {
            //评论列表（文章列表，查询的是每篇文章评论相关的信息）
            comments:[],
            //筛选条件
            reqParams:{
                page:1,
                per_page:10,
                //获取评论相关信息
                response_type:'comment',                
            },
            total:0,
            

        }
    },
    created(){
        this.getComments()
    },
    methods:{
             //打开/关闭评论
            toggleStatus(row){
                //row中有 id 当前文章ID comment_status 当前评论状态
                //const {id, comment_status} =row
                const text1="操作会关闭该文章的评论功能，关闭后用户将无法评论，您确认关闭吗？"
                const text2="此操作会开启文章评论，您确认吗？"
                const text = row.comment_status ? text1:text2
                //弹确认框
                this.$confirm(text, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        //点击确认
                        // await this.$http.put(`comments/status?article_id=${row.id}`,{
                        //     allow_comment: !row.comment_status
                        // })
                        // 快捷写法 axios.get() axios.post() axios.delete() axios.put() axios.patch() 
                        //综合写法 axios({})
                        try{
                            await this.$http({
                                method:'put',
                                url:'comments/status',
                                // ?后键值对传参
                                params:{
                                    //row.id超出了最大安全数组，json-bigint 转换成了对象
                                    article_id: row.id.toString()
                                },
                                //请求体传参
                                data:{
                                    allow_comment: !row.comment_status
                                }        
                            })
                            this.$message.success(row.comment_status?'关闭成功':'打开成功')
                            //修改row中的文章状态，驱动当前行进行渲染
                            row.comment_status = !row.comment_status
                        } catch(e){
                            this.$message.error(row.comment_status?'关闭失败':'打开失败');
                            
                        }
                    }).catch(() => {});
            },
        //改变分页尺码
        changeSize(size){
            // console.log(size);
            this.reqParams.page =1
            this.reqParams.per_page=size
            this.getComments()
        },
        //进行分页
        changePage(newPage){
            this.reqParams.page = newPage
            this.getComments()
        },
       async getComments(){
           const res = await this.$http.get('articles',{params:this.reqParams})
            console.log(res);
            this.comments = res.data.data.results
            this.total = res.data.data.total_counts
        }
    }
}
</script>

<style>

</style>